<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
			z-index: 9999;
		}
		section:not(.knowledege){
			position: relative;
			margin-top:100px;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
		}
	</style>
	<style class='classroom'>
		.example{
			position: relative;
			width: 100%;
		}
		.example>h2{
			margin: 50px auto;
			text-align: center;
		}
		.example>nav{
			position: absolute;
			margin: 50px auto;
			left: 0;
			top:0;
			width: 20%;
			display: flex;
			flex-flow:column wrap;
		}
		.example>nav>a{
			display: block;
			text-align: left;
			margin: 5px;
		}
		.example>iframe{
			position: absolute;
			top:0;
			right: 0;
			display: block;
			margin: 50px auto;
			width: 80%;
			height: 800px;
			background-color: rgba(0,0,0,.1);
		}
	</style>
</head>
<body>
	<header class="true">
		<h1 id='h-title'>11_CSS3变换transform</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>一、2D变换</h4>
			<p>
				1.rotate旋转
					a)例：transform:rotate(30deg); 沿着中心旋转30度	/	正:顺时针,反之则反
					b)角度单位，deg 

				2.scale缩放
					a)例：transform:scale(0.8); 缩小到0.8倍	/	一个值的时候表示X,Y一样

				3.translate位移
					a)例：transform:translate(50px,50px); 向右移动50px，向下移动50px	/	一个值为默认X轴

				4.skew倾斜
					a)例：transform:skew(20deg,30deg); 水平方向倾斜20deg，垂直方向倾斜30deg

				<mark>Transform多值</mark>	
					A ) transform:scale() translate()；与 transform:scale() translate();	
						执行先后，	
					B) transform:scale() translate() 下先scale后translate 受scale影响
			</p>
			<h4>二、变换基点</h4>
			<p>			
				1.transform-origin
					a)默认基点为中心点，可以通过设置坐标值或关键词改变基点	/	默认值:center center 0
						Z :定义基点被置于Z轴的何处(3D环境才有)。

					b)例：transform-origin:left top; 将变换基点改为左上角

				2. perspective-origin 景深基点 在什么方位去看

					perspective-origin：X Y;	透视点X Y轴的位置
						默认 50% 50%；
					X :定义基点被置于 X 轴的何处。
							值：【left  center right 】    【length 】 【%】
					Y :定义基点被置于Y 轴的何处。
							值：【top center bottom 】  【length】 【%】

				3. backface-visibility：visible | hidden

					visible（默认）： 指定元素背面可见
					hidden：指定元素背面不可见
			</p>
			<h4>三、3D变换</h4>
			<p>
				1.变换风格transform-style 和 景深perspective (近大远小)
					a)浏览器默认2D变换场景，是无法体现出3D变换样式的，所以在3D变换时要加上这两个属性

					transform-style 	建立3D空间
						flat（默认）		指定子元素位于此元素所在平面内
						preserve-3d		指定子元素定位在三维空间内

					perspective 		视镜 查看 3D 元素的距离【none | length】
			</p>
		</article>
	</section>
	<section class='example'>
		<h2>案例展示:</h2>
		<nav>
			<a href="case/1-transform.html" target="case"></a>
			<a href="case/2-3d变换.html" target="case"></a>
		</nav>
		<iframe name='case' src="homeWork.html" frameborder="0"></iframe>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		(function(){
			var hTitle = document.getElementById('h-title'),
				otitle = document.querySelector('head title');
			otitle.innerText = hTitle.innerText;

			var oCase = document.querySelectorAll('.example>nav>a'),
				length = oCase.length;
			for (var i = 0; i < length; i++) {
				oCase[i].innerText = decodeURI(oCase[i].href.split('case/')[1]);
			}
		})();
	</script>
</body>
</html>